﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#cboclass").change(function () {
                var className = $(this).val();
                if (className == "请选择") return;
                $("#list").empty();//清空上次查询结果
                $.post("/Handlers/JsonQuery.ashx", { "className": className }, function (data, status) {
                    alert(data);
                    var list = $.parseJSON(data);//将json字符串反序列化json对象
                    for (var i = 0; i < data.length; i++) {
                        var li = "<li>" + data[i].StudentId + "&nbsp;" + data[i].StudentName + "&nbsp;" + data[i].ClassName + "&nbsp;"
                        $("#list").append(li);//将li追加到UL后面
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div>
        <select id="cboclass">
            <option>-请选择-</option>
            <option>软件一班</option>
            <option>软件二班</option>
            <option>软件三班</option>
        </select>
        <ul id="list"></ul>

    </div>
</body>
</html>